<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.wz_jsgraphics.js"></script>
		<script type="text/javascript" src="js/arrowsandboxes.js"></script>
		
		<link type="text/css" rel="stylesheet" href="style/arrowsandboxes.css">		
	</head>
	<style>
		body {
			font-family: Verdana, Arial, Helvetica, sans-serif;
		}
	</style>
	<body>

<h3>About</h3>
<p>This is the preview editor for <a href="http://www.headjump.de/article/arrows-and-boxes" title="Arrows-and-boxes documentation and examples">Arrows-and-boxes</a> - a javascript plugin that automatically draws nice arrows and boxes from simple markup.</p>
<p>Enter your arrows-and-boxes code below - the preview will update itself each some seconds.</p>
<p>This editor can only show you a live preview of what your drawing will look like. <strong>Go get your code back to your site don't forget to copy and paste it!</strong></p>

	<script type="text/javascript">
		var update_aab = function() {
			(function($) {
				$("#aab-des-container").empty().append("<pre class='aab-updated'/>");
				var x = $("pre.aab-updated");
				x.html($("#aab-source").val()).arrows_and_boxes();
				if($("#aab_cb").attr("checked")) setTimeout(update_aab, 1500);
			})(jQuery);
		}

		jQuery(function() {
			jQuery("#aab_cb").attr("checked", true);
			var init_g = "(Editor) &gt; shows (Graph preview)";
			var us = unescape(document.location.search);
			if(us.indexOf("g=") != -1) {
				init_g = unescape(us.substring(3));
			}
			jQuery("#aab-source").val(init_g);
		});
		
		
		setTimeout(update_aab, 800);
	</script>


<h3>Preview editor</h3>
<p>
<label for="aab_cb"><input ckecked="yes" type="checkbox" id="aab_cb" name="aab_cb" onchange="update_aab();"> auto update</label> | <a href="#" onclick="update_aab(); return false;">Update now</a>
</p>
<p>
<textarea id="aab-source" name="user_eingabe" cols="65" rows="8"></textarea>
</p>

<div id="aab-des-container">
</div>	
	
<h3>Quick reference</h3>
<table>
<tr>
	<td>Simple node</td>
	<td><pre>(Node title | subtitle)</pre></td>
</tr>
<tr>
	<td>New line</td>
	<td><pre>(Node1) || (Node2)</pre></td>
</tr>
<tr>
	<td>Arrow types</td>
	<td><pre>-, &gt;, &lt;, &lt;&gt;</pre></td>
</tr>
<tr>
	<td>Arrows</td>
	<td>
<pre>
(Node1) &gt; (Node 2 >[n3])
(n3: Node 3)
</pre></td>
</tr>
<tr>
	<td>Escape HTML</td>
	<td><pre>( {{&lt;a href="http://headjump.de"&gt;link&lt;/a&gt;}} )</pre></td>
</tr>
</table>

	</body>
</html>